<template>
    <div class="welcome">
        <div class="header">
            <span class="rect"></span>
            <span class="welcome-title">欢迎页</span>
        </div>
        <div class="container">
            <div class="content">
                <div class="top">
                    <div class="left-user">
                        <div class="avater">
                            <img src="../assets/images/welcome/u7734.png" alt="Avatar" />
                        </div>
                        <div class="right-msg">
                            <div class="wel-message">早安，尚华明，祝你开心每一天！</div>
                            <div class="introduction">
                                <span class="intro1">研究员</span>
                                <span class="intro2">新疆树木年轮生态实验室-研究员</span>
                            </div>
                        </div>
                    </div>
                    <div class="right-project">
                        <div class="pro pro-border">
                            <div class="pro-title">项目访问</div>
                            <div class="pro-num">56</div>
                        </div>
                        <div class="pro pro-border">
                            <div class="pro-title">团队内排名</div>
                            <div class="pro-num">
                                <span class="num">8</span>
                                <span class="sum">/24</span>
                            </div>
                        </div>
                        <div class="pro pro3">
                            <div class="pro-title">项目访问</div>
                            <div class="pro-num">56</div>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">
                        <div class="nav">
                            <div class="nav-title">快速开始/便捷导航</div>
                            <div class="nav-content">
                                <div class="nav-button">
                                    <button class="btn">新建项目</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">操作一</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">操作二</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">操作三</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">操作四</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">操作五</button>
                                </div>
                                <div class="nav-button">
                                    <button class="btn">添加</button>
                                </div>
                            </div>
                        </div>
                        <div class="dynamic">
                            <div class="dynamic-title">动态</div>
                            <div class="dynamic-content">
                                <div class="dynamic-items" v-for="(item, index) in messageitems" :key="index">
                                    <div class="dynamic-avater">
                                        <img :src="item.image" alt="Avatar" />
                                    </div>
                                    <div class="dynamic-msg">
                                        <div class="dynamic-message">
                                            {{ item.message }}
                                        </div>
                                        <div class="time">{{ item.time }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="project">
                            <div class="project-title">
                                <span>进行中的项目</span>
                                <span>全部项目</span>
                            </div>
                            <div class="project-content">
                                <div class="project-items" v-for="(item, index) in items" :key="index">
                                    <div class="proitems-title">
                                        <div class="proitems-img">
                                            <img :src="item.image" alt="img" />
                                        </div>
                                        <div class="proitems-msg">{{ item.title }}</div>
                                    </div>
                                    <div class="proitems-content">
                                        {{ item.text }}
                                    </div>
                                    <div class="proitems-info">
                                        <span class="proitems-name">{{ item.name }}</span>
                                        <span class="proitems-time">{{ item.time }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="interaction">
                            <div class="team">
                                <div class="team-title">团队</div>
                                <div class="team-content">
                                    <div class="team-items" v-for="(item, index) in items" :key="index">
                                        <div class="teamitems-img">
                                            <img :src="item.image" alt="img" />
                                        </div>
                                        <div class="teamitems-msg">{{ item.name }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="activity">
                                <div class="activity-title">活跃指数</div>
                                <div class="activity-content">
                                    <div ref="chart" style="width: 100%; height: 100%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import * as echarts from "echarts";
import "echarts-gl";
export default {
    data() {
        return {
            items: [
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    title: "树木年轮气候变化研究",
                    text: "树木年轮气候变化研究是通过分析树木年轮的宽度、密度和稳定同位素等特征",
                    time: "17分钟前",
                    name: "张同文",
                },
            ],
            messageitems: [
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    message: "崔秀织在部门面板发布了留言",
                    time: "3天前",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    message: "崔秀织在部门面板发布了留言",
                    time: "3天前",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    message: "崔秀织在部门面板发布了留言",
                    time: "3天前",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    message: "崔秀织在部门面板发布了留言",
                    time: "3天前",
                },
                {
                    image: require("@/assets/images/welcome/u7811.jpg"),
                    message: "崔秀织在部门面板发布了留言",
                    time: "3天前",
                },
            ],
        };
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            const chartDom = this.$refs.chart;
            const myChart = echarts.init(chartDom);

            // 指定图表的配置项和数据
            const option = {
                tooltip: {},
                legend: {
                    show: true,
                    data: [
                        { name: '土壤含水量', icon: 'circle' },
                        { name: '土壤温度', icon: 'circle' },
                        { name: '土壤电导率', icon: 'circle' }
                    ],
                    itemWidth: 6,
                    itemGap: 40,
                    bottom: 0,
                    textStyle: {
                        color: '#333',
                        fontSize: 20
                    }
                },
                radar: {
                    name: {
                        textStyle: {
                            color: '#333',
                            fontSize: 20,
                            borderRadius: 3,
                            padding: [3, 5]
                        }
                    },
                    indicator: [
                        { name: '口碑', max: 6500 },
                        { name: '引用', max: 16000 },
                        { name: '产量', max: 30000 },
                        { name: '贡献', max: 38000 },
                        { name: '热度', max: 52000 }
                    ],
                    splitArea: {
                        areaStyle: {
                            color: [
                                'rgba(255,255,255, 0.5)',
                                'rgba(255,255,255, 0.3)',
                                'rgba(255,255,255, 0.2)',
                                'rgba(255,255,255, 0.2)',
                                'rgba(255,255,255, 0.1)'
                            ],
                            shadowColor: 'rgba(0, 0, 0, 0.3)',
                            shadowBlur: 10
                        }
                    }
                },
                series: [
                    {
                        name: '预算 vs 开销（Budget vs spending）',
                        type: 'radar',
                        data: [
                            {
                                value: [4300, 10000, 28000, 35000, 50000],
                                name: '土壤含水量',
                                lineStyle: {
                                    color: '#FACC14'
                                }
                            },
                            {
                                value: [5000, 14000, 28000, 15000, 42000],
                                name: '土壤温度',
                                lineStyle: {
                                    color: '#2FC25B'
                                }
                            },
                            {
                                value: [5000, 4000, 2000, 31000, 4000],
                                name: '土壤电导率',
                                lineStyle: {
                                    color: '#1890FF'
                                }
                            }
                        ]
                    }
                ]

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    }
};
</script>
<style lang="scss" scoped>
.welcome {
    height: 100vh;
    width: 100vw;
    margin-top: 20px;
    background-color: #ffffff;

    .header {
        height: 3%;
        width: 100%;
        border-bottom: 0.05rem solid rgb(226, 223, 223);

        .rect {
            margin-left: 2rem;
            width: 0.5rem;
            height: 0.8rem;
            border: 0.05rem solid black;
            display: inline-block;
        }

        .welcome-title {
            margin-left: 0.3rem;
            display: inline-block;
            color: rgb(12, 79, 141);
            font-size: 1.2rem;
            font-weight: bold;
        }
    }

    .container {
        height: 90%;
        width: 100%;

        .content {
            width: 97%;
            height: 100%;
            margin: 0.5rem 1.5rem 0 1.5rem;
            border: 0.05rem solid #e2dfdf;

            .top {
                height: 15%;
                width: 98.3%;
                margin: 0.5rem 1rem;
                border: 0.05rem solid #e2dfdf;
                display: flex;
                justify-content: space-between;

                .left-user {
                    width: 20%;
                    height: 100%;
                    // border: 0.05rem solid #e2dfdf;
                    display: flex;
                    align-items: center;

                    .avater {
                        width: 10%;
                        height: 50%;
                        // border: 0.05rem solid #e2dfdf;
                        width: 15%;
                        height: 50%;
                        margin-left: 1.5rem;
                    }

                    .right-msg {
                        width: 80%;
                        height: 60%;
                        margin-left: 1rem;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        // border: 0.05rem solid #e2dfdf;

                        .wel-message {
                            font-size: 1.2rem;
                        }

                        .introduction {
                            width: 100%;
                            font-size: 1rem;

                            .intro1 {
                                display: inline-block;
                                width: 18%;
                                border-right: 0.05rem solid #929292;
                                color: #929292;
                            }

                            .intro2 {
                                display: inline-block;
                                margin-left: 0.5rem;
                            }
                        }
                    }
                }

                .right-project {
                    width: 20%;
                    height: 100%;
                    // border: 0.05rem solid #e2dfdf;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: center;

                    .pro-border {
                        border-right: 0.05rem solid #b1afaf;
                        /* 根据您的需求调整边框样式 */
                    }

                    .pro {
                        width: 30%;
                        height: 40%;
                        // border: 0.05rem solid #e2dfdf;

                        .pro-title {
                            font-size: 1rem;
                            color: #929292;
                            display: flex;
                            /* 启用Flexbox */
                            justify-content: center;
                            /* 水平居中 */
                            align-items: center;
                        }

                        .pro-num {
                            font-size: 1.5rem;
                            display: flex;
                            /* 启用Flexbox */
                            justify-content: center;
                            /* 水平居中 */
                            align-items: center;

                            .sum {
                                font-size: 1rem;
                                color: #929292;
                            }
                        }
                    }
                }
            }

            .bottom {
                height: 83%;
                width: 100%;
                border: 0.05rem solid #e2dfdf;
                display: flex;

                .left {
                    width: 40%;
                    height: 96%;

                    .nav {
                        width: 90%;
                        height: 25%;
                        margin: 1.5rem 1rem;

                        .nav-title {
                            width: 100%;
                            height: 12%;
                            font-weight: bold;
                            font-size: 1rem;
                            // border: 0.05rem solid;
                            margin-bottom: 0.5rem;
                        }

                        .nav-content {
                            width: 100%;
                            height: 45%;
                            display: flex;
                            flex-wrap: wrap;
                            /* 允许子元素换行 */
                            border-top: 0.05rem solid #e2dfdf;

                            .nav-button {
                                width: calc(25% - 0.5rem);
                                /* 减去间距的宽度 */
                                height: auto;
                                /* 根据内容自动调整高度 */
                                margin-top: 1rem;
                                margin-right: 0.5rem;
                                /* 设置右边距 */
                                display: flex;
                                /* 启用Flexbox */
                                justify-content: center;
                                /* 水平居中 */
                                align-items: center;

                                /* 垂直居中 */
                                .btn {
                                    font-size: 1rem;
                                    background: transparent;
                                    border: 0;
                                    /* 如果需要移除边框 */
                                    width: 100%;
                                    /* 占满整个容器 */
                                }
                            }
                        }
                    }

                    .dynamic {
                        width: 90%;
                        height: 75%;
                        margin: -2rem 1rem;

                        .dynamic-title {
                            width: 100%;
                            height: 4%;
                            font-weight: bold;
                            font-size: 1rem;
                            // border: 0.05rem solid;
                            margin-bottom: 0.5rem;
                        }

                        .dynamic-content {
                            width: 100%;
                            height: 88%;
                            // display: flex;
                            // flex-wrap: wrap; /* 允许子元素换行 */
                            // border-top: 0.05rem solid #e2dfdf;

                            .dynamic-items {
                                width: 100%;
                                height: 20%;
                                border: 0.05rem solid #e2dfdf;
                                display: flex;
                                align-items: center;

                                .dynamic-avater {
                                    width: 6%;
                                    height: 50%;
                                    // border: 0.05rem solid #e2dfdf;
                                    // width: 15%;
                                    height: 50%;
                                    margin-left: 1.5rem;

                                    img {
                                        width: 3rem;
                                        /* 头像宽度，可以根据需要调整 */
                                        height: 3rem;
                                        /* 头像高度，设置为与宽度相同 */
                                        // border-radius: 50%; /* 将图片裁剪成圆形 */
                                    }
                                }

                                .dynamic-msg {
                                    width: 80%;
                                    height: 60%;
                                    margin-left: 1rem;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: space-between;
                                    // border: 0.05rem solid #e2dfdf;

                                    .dynamic-message {
                                        font-size: 1.2rem;
                                    }

                                    .time {
                                        width: 100%;
                                        font-size: 1rem;

                                        .intro1 {
                                            display: inline-block;
                                            width: 18%;
                                            border-right: 0.05rem solid #929292;
                                            color: #929292;
                                        }

                                        .intro2 {
                                            display: inline-block;
                                            margin-left: 0.5rem;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }

                .right {
                    width: 60%;
                    height: 96%;

                    .project {
                        width: 97%;
                        height: 50%;
                        margin: 1.5rem 1rem;

                        .project-title {
                            width: 100%;
                            height: 8%;
                            font-weight: bold;
                            font-size: 1rem;
                            // border: 0.05rem solid;
                            // margin-bottom: 0.5rem;
                            display: flex;
                            justify-content: space-between;

                            span {
                                display: inline-block;
                            }
                        }

                        .project-content {
                            width: 100%;
                            height: 88%;
                            display: grid;
                            grid-template-columns: repeat(3, 1fr);
                            /* 6列 */
                            grid-gap: 10px;
                            /* 间距 */
                            // padding: 10px;
                            flex-wrap: wrap;
                            /* 允许子元素换行 */
                            // border-top: 0.05rem solid #e2dfdf;

                            .project-items {
                                display: flex;
                                /* 启用Flexbox */
                                //justify-content: center; /* 水平居中 */
                                //   align-items: center; /* 垂直居中 */
                                flex-direction: column;
                                border: 0.05rem solid #e2dfdf;

                                .proitems-title {
                                    width: 100%;
                                    height: 40%;
                                    // border: 0.05rem solid #e2dfdf;
                                    display: flex;
                                    align-items: center;

                                    .proitems-img {
                                        width: 10%;
                                        height: 50%;
                                        // border: 0.05rem solid #e2dfdf;
                                        // width: 15%;
                                        height: 50%;
                                        margin-left: 1.5rem;

                                        img {
                                            width: 2rem;
                                            /* 头像宽度，可以根据需要调整 */
                                            height: 2rem;
                                            /* 头像高度，设置为与宽度相同 */
                                            // border-radius: 50%; /* 将图片裁剪成圆形 */
                                        }
                                    }

                                    .proitems-msg {
                                        font-size: 0.8rem;
                                        font-weight: bold;
                                    }
                                }

                                .proitems-content {
                                    width: 96%;
                                    height: 30%;
                                    // border: 0.05rem solid #e2dfdf;
                                    font-size: 0.8rem;
                                    color: #929292;
                                    padding: 0 0.5rem;
                                }

                                .proitems-info {
                                    width: 88%;
                                    height: 30%;
                                    // border: 0.05rem solid #e2dfdf;
                                    display: flex;
                                    flex-direction: row;
                                    justify-content: space-between;
                                    align-items: center;
                                    padding: 0 1.5rem;

                                    .proitems-name {
                                        font-size: 0.8rem;
                                        color: #6b6b6b;
                                    }

                                    .proitems-time {
                                        font-size: 0.75rem;
                                        color: #c7c3c3;
                                    }
                                }
                            }
                        }
                    }

                    .interaction {
                        width: 97%;
                        height: 45%;
                        margin: 1.5rem 1rem;
                        display: flex;
                        // border: 0.05rem solid #e2dfdf;

                        .team {
                            width: 65%;
                            height: 100%;

                            .team-title {
                                width: 100%;
                                height: 12%;
                                font-weight: bold;
                                font-size: 1rem;
                                // border: 0.05rem solid;
                                margin-bottom: 0.5rem;
                            }

                            .team-content {
                                width: 100%;
                                height: 88%;
                                display: flex;
                                flex-wrap: wrap;
                                /* 允许子元素换行 */
                                border-top: 0.05rem solid #e2dfdf;

                                .team-items {
                                    width: calc(50% - 0.5rem);
                                    /* 减去间距的宽度 */
                                    height: 20%;
                                    /* 根据内容自动调整高度 */
                                    // margin-top: 1rem;
                                    // margin-right: 0.5rem; /* 设置右边距 */
                                    display: flex;
                                    /* 启用Flexbox */
                                    justify-content: flex-start;
                                    /* 水平居中 */
                                    align-items: center;
                                    /* 垂直居中 */
                                    border: 0.05rem solid #e2dfdf;

                                    .teamitems-img {
                                        // border: 0.05rem solid #e2dfdf;
                                        // width: 15%;
                                        height: 50%;
                                        width: 15%;
                                        height: 55%;
                                        margin-left: 1.5rem;

                                        img {
                                            width: 2rem;
                                            /* 头像宽度，可以根据需要调整 */
                                            height: 2rem;
                                            /* 头像高度，设置为与宽度相同 */
                                            // border-radius: 50%; /* 将图片裁剪成圆形 */
                                        }
                                    }
                                }
                            }
                        }

                        .activity {
                            width: 35%;
                            height: 100%;

                            .activity-title {
                                width: 96%;
                                height: 12%;
                                font-weight: bold;
                                font-size: 1rem;
                                margin-bottom: 0.5rem;
                                margin-left: 1rem;
                            }

                            .activity-content {
                                width: 96%;
                                height: 88%;
                                display: flex;
                                flex-wrap: wrap;
                                /* 允许子元素换行 */
                                border-top: 0.05rem solid #e2dfdf;
                                margin-left: 1rem;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
